iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
Modern Web

訂單網頁嘗試集系列 第 9

{Day9} 小公主訂單網頁嘗試集_第九集_相對位置&絕對位置

  • 分享至 

  • xImage
  •  

排版好的網頁真的很重要ㄚ,那小公主今天要的是位置設定的兩種方法:絕對位置&相對位置

大致可分為以下這些分類方式
• absolute:絕對位置,當網頁往下拉時,元素也會跟著改變位置,其元素的位置由 top、left、right、bottom 所決定。
• fixed:元素位置固定,相對於瀏覽器而定位,其元素的位置由 top、left、right、bottom 所決定。
• relative:相對位置,相對於其它元素的位置,其元素的位置由 top、left、right、bottom 所決定。
• static:這就是預設值,如果設定 position 為 static,則 top、left、right、bottom 會被忽略。
• inherit:繼承自父層 position 定位屬性的值。

法1:絕對位置

網頁的 < p > 元素 position 為 absolute(絕對位置),距離上方180px(top:180px;),距離左方650px(left:650px;),因為是絕對位置,所以這個元素不會因為其它段落變化而改變位置。

p {
 position:absolute;
 top:180px;
 left:650px
}

法2:相對關係
因為是相對位置,這個元素會因為其它段落變化而改變位置。

h3{
 position:relative;
 top:180px;
 left:650px
}

網頁呈現:
https://ithelp.ithome.com.tw/upload/images/20220923/20151423h3Xb1qMKe7.png


上一篇
{Day8} 小公主訂單網頁嘗試集_第八集_css初學
下一篇
{Day10} 小公主訂單網頁嘗試集_第十集_區塊(div)介紹
系列文
訂單網頁嘗試集30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言